
<template>
<div>
    <template v-for="item in data">
      <div class="new"  :key="item.id">
          <div class="overall">
      <div class="author">
        <img :src="item.clientImage" />
        <span>{{item.clientName}}</span>
      </div>
      <div class="neirong">
        <h4>为啥要加柠檬汁.没有的话！用啥代替</h4>
        <span>加柠檬汁第一个是去蛋腥味，第二个是增加蛋白的稳定。没有的话可以用白醋代替。</span>
      </div>
      <div class="zan">
        <span>215个赞</span>
      </div>
  </div>
         
      </div>
    </template>
</div>
</template>
<script>
import axios from "axios";
export default {
 data(){
        return{
         data:[]
        }
        
    },
    mounted(){
      // let url = "https://api.hongbeibang.com/question/getHot?_t=1607152689639&pageIndex=0&pageSize=10&all=true&timestamp=1607152689638"
      let url = "https://api.hongbeibang.com/question/getEssence?_t=1607309179361&pageIndex=0&pageSize=10&all=true&timestamp=1607309179361"
        axios.get(url).then((res)=>{
          let data = res.data.data.content.data
          this.data = data
          console.log(data)
      })
    }
}
</script>

<style lang="scss" scoped>
      .overall{
        width: 100%;
        height: 150px;
        border-bottom:1px solid #E7E2E5;
        position:relative;
        top: 100px;
        margin-top: 5px;
        .author{
          width: 100%;
          height: 45px;
          // margin-left: 20px;
          img{
          width: 38px;
          height: 38px;
          border-radius: 34px;
        }
          span{
                font-size: 13px;
    height: 40px;
    line-height: 38px;
    text-align: left;
    color: #4A4945;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
          }
        }
        .neirong{
          width: 100%;
          h4{
            font-size: 18px;
    font-weight: bold;
    color: #4A4945;
    line-height: 25px;
    max-height: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: box;
    display: -moz-box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
          }
          span{
                font-size: 14px;
    color: #4A4945;
    line-height: 20px;
    margin: 5px 0 0 0;
    max-height: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
          }

        }
        .zan{
          width: 100%;
          span{
                overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    box-sizing: border-box;
}

        }
        }
</style>>

